<template>
<div class="ill-type-select-warp">
  <el-select v-model="inputValue" class="ill-type-select">
	  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
  <i class="el-icon-loading" style="font-size:18px;" v-if="loading"></i>
  <el-button v-if="loadErr" @click="load" style="margin-left:10px;">重试</el-button>
</div>
</template>

<script>
import { getIllTypes } from "../utils/actions";

export default {
	name: "ill-type-select",
	props: {
		value: String
	},
	data() {
		return {
			inputValue: this.value,
			options: [],
			loading: false,
			loadErr: false
		};
	},
	watch: {
		inputValue(val) {
			this.$emit("input", val);
		}
	},
	methods: {
		formatOptions(input) {
			let res = [];
			for (let i in input) {
				res.push({ value: i, label: input[i] });
			}
			return res;
		},
		load() {
			this.loadErr = false;
			this.loading = true;
			this.$emit("update:loading", true);
			getIllTypes()
				.then(res => {
					this.options = this.formatOptions(JSON.parse(res));
					this.loading = false;
					this.$emit("update:loading", false);
				})
				.catch(err => {
					this.loadErr = true;
					this.loading = false;
					this.$emit("update:loading", false);
					this.$message.error("获取病种选项失败！" + err.message);
				});
		}
	},
	created() {
		this.load();
	}
};
</script>

<style lang="less">
.ill-type-select-warp {
	display: flex;
	flex-direction: row;
	.ill-type-select {
		flex: 1;
	}
	.el-icon-loading {
		line-height: 40px;
	}
}
</style>
